<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/common/taglibs.jsp" %>    
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="${ctx}/static/lib/layui/css/layui.css">
<style type="text/css">
.main_div{
	margin : 15px;
}
</style>
</head>
<body>
	
	<div class="main_div">
		<form id="from_update" class="layui-form layui-form-pane" action="">
		  <input type="hidden" name="id" value="${product.id}"/>
		  <div class="layui-form-item">
		    <label class="layui-form-label">商品名称</label>
		    <div class="layui-input-block">
		      <input type="text"  value="${product.name}" name="name" autocomplete="off" placeholder="请输入标题" class="layui-input">
		    </div>
		  </div>
		  <div class="layui-form-item">
		    <label class="layui-form-label">商品副标题</label>
		    <div class="layui-input-block">
		      <input type="text" name="subtitle" value="${product.subtitle}" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
		    </div>
		  </div>
		  
		  <div class="layui-form-item">
		    <label class="layui-form-label">商品分类</label>
		    <div class="layui-input-inline">
		      <select id="topCategory" lay-filter="topCategoryFilter">
		      </select>
		    </div>
		    <div class="layui-input-inline">
		      <select name="categoryId"  id="secondCategory">
		      </select>
		    </div>
		  </div>
		  <div class="layui-form-item">
		    <label class="layui-form-label">商品价格</label>
		    <div class="layui-input-inline">
		      <input type="text" name="price" value="${product.price}" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
		    </div>
		  </div>
		  <div class="layui-form-item">
		    <label class="layui-form-label">商品库存</label>
		    <div class="layui-input-inline">
		      <input type="text" name=stock lay-verify="required" value="${product.stock}" placeholder="请输入" autocomplete="off" class="layui-input">
		    </div>
		  </div>
		  <div class="layui-form-item" pane="">
		    <label class="layui-form-label">商品状态</label>
		    <div class="layui-input-block">
		      <input type="radio" name="status" value="1" title="上架" checked="">
		      <input type="radio" name="status" value="0" title="下架" >
		    </div>
		  </div>
		  <div class="layui-form-item">
		    <label class="layui-form-label">商品图片</label>
		    <input type="hidden" name="mainImage" id="mainImage"/>
		    <div class="layui-input-block layui-upload">
			  <button type="button"  class="layui-btn" id="uploadBtn">更改图片</button>
			  <div class="layui-upload-list">
			    <img width="150px" height="150px" src="/uploadimg/${product.mainImage}"  class="layui-upload-img" id="mainImg">
			    <p id="demoText"></p>
			  </div>
			</div> 
		  </div>
		  <div class="layui-form-item layui-form-text">
		    <label class="layui-form-label">文本域</label>
		    <div class="layui-input-block">
		    	<!-- 富文本加id="editor_id" -->
		      <textarea  id="editor_id" name="detail"  placeholder="请输入内容"  class="layui-textarea" >${product.detail}</textarea>
		    </div>
		  </div>
		</form>
		  <button class="layui-btn" onclick="submitForm()">修改</button>
	</div>
	
	
	<script src="${ctx}/static/back/js/jquery.min.js?v=2.1.4"></script>
	<script src="${ctx}/static/common/mylayer.js"></script>
	<script src="${ctx}/static/common/util.js"></script>
	<script src="${ctx}/static/lib/layui/layui.js"></script>
	<script src="${ctx}/static/lib/kindeditor/kindeditor.js"></script>
	<script src="${ctx}/static/lib/kindeditor/lang/zh_CN.js"></script>
	<script type="text/javascript">
		layui.use(['form', 'upload'], function(){ //from表单，上传文件需要的
		  var form = layui.form;
		  var upload = layui.upload;
		  form.render('select'); //刷新select选择框渲染，二级及以下分类加上
		 
		  //监听select选择
		  //下拉选择框被选中时触发，回调函数返回一个object参数，携带两个成员：
		  form.on('select(topCategoryFilter)', function(data){
			  console.log(data.elem); //得到select原始DOM对象
			  console.log(data.value); //得到被选中的值
			  console.log(data.othis); //得到美化后的DOM对象
			  $.ajax({
				url : "${ctx}/category/selectSecondCategory.action",
				type : "post",
				data : {"topCategoryId" : data.value}, //要往前台传输一级标题的主键id
				dataType : "json",
				success : function(resp) {
					console.log(resp);
					if(resp.code == util.SUCCESS) {
						var html = "<option value=''>请选择二级分类</option>";
						var data = resp.data;
						for(var i = 0; i < data.length; i++) {
							html += "<option value='"+data[i].id+"'>"+data[i].name+"</option>"
						}
						$("#secondCategory").html(html);
						form.render('select'); //刷新select选择框渲染，二级及以下分类加上
					} else {
						mylayer.errorMsg(resp.msg);
					}
				}
			  });
		  });   
		  
		  //图片上传
		  var uploadInst = upload.render({
			     elem: '#uploadBtn'
			    ,url: '${ctx}/upload/uploadImg.action'
			    ,before: function(obj){
			      //预读本地文件示例，不支持ie8
			      obj.preview(function(index, file, result){
			        $('#mainImg').attr('src', result); //图片链接（base64）
			      });
			    }
			    ,done: function(resp){
			       if(resp.code == util.SUCCESS) {
			    	   //给这个隐藏标签填上value值<input type="hidden" name="mainImage" id="mainImage"/>
			    	   $("#mainImage").val(resp.data);
			       }
			    }
			    ,error: function(){
			      //演示失败状态，并实现重传
			      var demoText = $('#demoText');
			      demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
			      demoText.find('.demo-reload').on('click', function(){
			        uploadInst.upload();
			      });
			    }
		    });
		});
		
		//不在监听器内，加载页面即加载这里
		$(function(){
			$.ajax({
			//加载一级分类，
			url : "${ctx}/category/selectTopCategory.action",
			type : "post",
			dataType : "json",
			success : function(resp){
				console.log(resp);
				if(resp.code == util.SUCCESS){
					var html = "<option value=''>请选择一级分类</option>";
					var data = resp.data;
					for(var i = 0; i< data.length;i++){
						html += "<option value='"+ data[i].id +"'>"+ data[i].name +"</option>"
					}
					$("#topCategory").html(html);
				} else {
					mylayer.errorMsg(resp.msg);
				}
			}
			});
		});
		
		//ajax提交表单
		function submitForm(){
			$.ajax({
				url : "${ctx}/product/update.action",
				data : $('#from_update').serialize(),
				type : "post",
				dataType : "json",	
				success : function(resp){
					if(resp.code == util.SUCCESS){
						mylayer.confirm("修改成功,是否跳转商品列表界面？", "${ctx}/product/getProductPage.action");
					} else {
						mylayer.errorMsg(resp.msg);
					}
				}
				
			});
		}
		
			var myKindEditor ;
	        KindEditor.ready(function(K) {
	            var kingEditorParams = {
	                //指定上传文件参数名称
	                 filePostName  : "file",
	                 //指定上传文件请求的url。
	                 uploadJson : '${ctx}/upload/uploadImgByEditor.action',
	                 //上传类型，分别为image、flash、media、file
	                 dir : "image",
	                 afterBlur: function () { this.sync(); }
	           }
	           var editor = K.editor(kingEditorParams);
		           
         //富文本编辑器
         myKindEditor = KindEditor.create('#form_add[name=detail]', kingEditorParams);
       });
	</script>
	
</body>
</html>